<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="rowDel"
      >
        <template
          slot="costTypeForm"
          slot-scope="scope"
        >
          <el-select
            v-model="scope.row.costType"
            placeholder="请选择费用类型"
          >
            <el-option
              v-for="item in costTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <template
          slot="companyNameIdForm"
          slot-scope="scope"
        >
          <el-select
            filterable
            v-model="scope.row.companyNameId"
            placeholder="请选择公司名称"
            @change="getcontractNumber(scope.row.companyNameId)"
          >
            <el-option
              v-for="item in companyNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <template
          slot="contractNumberForm"
          slot-scope="scope"
        >
          <el-select
            v-model="searchForm.contractNumber"
            placeholder="请选择关联合同编号"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <template slot="menuLeft">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click.stop="handleAdd()"
          >新增</el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-download"
            @click.stop="exportDownload()"
          >导出</el-button>
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane
              label="未缴纳"
              name="first"
            ></el-tab-pane>
            <el-tab-pane
              label="已缴纳"
              name="second"
            ></el-tab-pane>
          </el-tabs>
        </template>
        <template
          slot-scope="scope"
          slot="menu"
        >
          <el-button
            v-if="scope.row.isPayment==0"
            type="text"
            @click="pay(scope.row)"
          >缴费</el-button>
          <el-button
            v-if="scope.row.isPayment==0"
            type="text"
            @click="editpay(scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            v-if="scope.row.costType==1&&scope.row.isPayment==1&&scope.row.moneyType==2"
            @click="backpay(scope.row)"
          >退款</el-button>
          <el-button
            type="text"
            @click="viewpay(scope.row)"
          >查看</el-button>
        </template>
      </avue-crud>
      <pay
        ref="pay"
        @refreshList="refreshList"
      ></pay>
      <backpay
        ref="backpay"
        @refreshList="refreshList"
      ></backpay>
      <detail ref="detail"></detail>
      <edit
        ref="edit"
        @refreshList="refreshList"
      ></edit>
    </basic-container>
  </div>
</template>

<script>
import { fetchList, getObj, addObj, putObj, delObj, selectObj } from '@/api/cothercost'
import { getCompanyByPhone, getDicType, ExportFile } from '@/api/common'
import { tableOption } from '@/const/crud/cothercost'
import { mapGetters } from 'vuex'
import pay from '@/components/invoice/pay'
import backpay from '@/components/invoice/backpay'
import detail from './detail'
import edit from './edit'
export default {
  name: 'cothercost',
  components: { pay, backpay, detail, edit },
  data () {
    return {
      searchForm: {
        contractNumber: '',
        companyName: '',
        costType: '',
        isPayment: ''
      },
      tableData: [],
      companyNameList: [],
      costTypeList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      options: [],
      tableLoading: false,
      tableOption: tableOption,
      activeName: 'first'
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList () {
      return {
        addBtn: this.vaildData(this.permissions.generator_cothercost_add, false),
        delBtn: this.vaildData(this.permissions.generator_cothercost_del, false),
        editBtn: this.vaildData(this.permissions.generator_cothercost_edit, false)
      };
    }
  },
  created () {

  },
  mounted () {
    getCompanyByPhone().then(response => {
      if (response.data != null) {
        this.companyNameList = response.data.data;
      }
    })
    getDicType('other_money_type').then(res => {
      this.costTypeList = res.data.data
    })
  },
  methods: {
    // 根据公司获取合同编号
    getcontractNumber (val) {
      selectObj({ companyId: val }).then(res => {
        this.options = res.data.data
      })
    },
    // 查看
    viewpay (item) {
      this.$refs.detail.init(item)
    },
    // 编辑
    editpay (item) {
      this.$refs.edit.init(item)
    },
    // 退款
    backpay (item) {
      this.$refs.backpay.init(item)
    },
    refreshList () {
      this.getList(this.page)
    },
    // 缴费
    pay (item) {
      this.$refs.pay.init(item, null, 1)
    },
    changeNumberId () {

    },
    exportDownload () {
      let ispayment = 0
      if (this.activeName == 'first') {
        ispayment = 0
      } else {
        ispayment = 1
      }
      this.searchForm.ispayment = ispayment
      ExportFile('/cost/cothercost/export', { companyName: this.searchForm.companyNameId, companyNameId: null, isPayment: this.searchForm.isPayment })
    },
    handleClick (tab, event) {
      console.log(tab, event);
      this.getList(this.page)
    },
    getList (page, params) {
      this.tableLoading = true
      // if (this.searchForm.companyNameId) {
      //   this.searchForm.companyName = this.searchForm.companyNameId
      //   this.searchForm.companyNameId = null
      // }
      this.searchForm.isPayment = this.activeName == 'first' ? 0 : 1
      fetchList(Object.assign({
        current: this.page.currentPage,
        size: this.page.pageSize
      }, params, { companyName: this.searchForm.companyNameId, companyNameId: null, isPayment: this.searchForm.isPayment })).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除此条数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    handleUpdate: function (row, index, done, loading) {
      putObj(row).then(data => {
        this.$message.success('修改成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
    },
    handleSave: function (row, done, loading) {
      this.options.forEach(item => {
        if (item.value == this.searchForm.contractNumber) {
          row.contractNumber = item.label
        }
      })
      row.contractId = parseInt(this.searchForm.contractNumber)
      row.costType = parseInt(row.costType)
      addObj(row).then(data => {
        this.$message.success('添加成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange (current) {
      this.page.currentPage = current
    },
    searchChange (form, done) {
      // this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    refreshChange () {
      this.getList(this.page)
    },
    handleAdd () {
      this.searchForm = {
        contractNumber: '',
        companyName: ''
      }
      this.$refs.crud.rowAdd();
    }
  }
}
</script>
